<template>
  <!--空闲车辆列表-->
  <q-card bordered>
    <q-card-section horizontal class='justify-between q-gutter-md q-pa-lg'>
      <q-list bordered separator dense class='overflow-auto'>
        <q-item v-if='cars?.length===0'>
          <q-item-section>
            <q-btn flat disable label='暂无空闲车辆' />
            <q-btn flat class='text-primary' to='/truck_manage' label='去购买新车' dense />
          </q-item-section>
        </q-item>
        <q-item v-for='car in cars' :key='car.id' tag='label' v-ripple>
          <q-item-section avatar>
            <q-radio v-model='chosenCarId' :val='car.id' />
          </q-item-section>
          <q-item-section>
            <q-item-label>编号：{{ car.id }}</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
      <q-card-section class='flex-center flex no-margin no-padding column'>
        <div class='text-body1' style='margin-bottom: 20px'>已选择车辆编号：{{ chosenCarId }}</div>
        <div class='text-body1' style='margin-bottom: 20px'>已选择司机编号：{{ chosenDriverId }}</div>
        <q-btn color='primary' label='确 认 分 配' size='lg' @click='submit' push />
      </q-card-section>
      <q-list bordered separator dense class='overflow-auto'>
        <q-item v-for='driver in drivers' :key='driver.id' tag='label' v-ripple>
          <q-item v-if='drivers?.length===0'>
            <q-item-section>
              <q-btn flat disable label='暂无空闲司机' />
              <q-btn flat class='text-primary' to='/staff_manage' label='去招聘新司机' dense />
            </q-item-section>
          </q-item>
          <q-item-section avatar>
            <q-radio v-model='chosenDriverId' :val='driver.id' />
          </q-item-section>
          <q-item-section>
            <q-item-label>编号：{{ driver.id }}</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-card-section>
  </q-card>
</template>

<script lang='ts'>
import { defineComponent, onMounted, ref } from 'vue';
import { Car, Driver } from 'app/typings';
import { allocate, getFreeCarList, getFreeDriverList } from 'src/services/api';
import { Notify } from 'quasar';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'Allocate',
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  setup(props) {
    const router = useRouter();
    const cars = ref<Car[]>();
    const drivers = ref<Driver[]>();
    const chosenCarId = ref<number>();
    const chosenDriverId = ref<number>();
    onMounted(async () => {
      try {
        cars.value = await getFreeCarList();
        drivers.value = await getFreeDriverList();
      } catch (error) {
      }
    });
    const submit = async () => {
      if (!chosenDriverId.value || !chosenCarId.value) {
        Notify.create({ message: '请分配车辆与司机！', type: 'negative', position: 'top' });
      } else {
        try {
          const response = await allocate(
            {
              carId: chosenCarId.value,
              driverId: chosenDriverId.value,
              id: props.id
            });
          if (response.status === 0) {
            Notify.create({ message: '分配成功！', type: 'positive', position: 'top' });
            setTimeout(() => router.go(0), 1000);
          }
        } catch (error) {
        }
      }
    };
    return {
      cars,
      drivers,
      chosenCarId,
      chosenDriverId,
      submit
    };
  }
});
</script>

<style scoped>
.q-list {
  width: 300px;
  height: 500px;
}

.q-btn {
  height: 50px;
}
</style>
